<template>
  <form-dialog ref="formDrawerRef" title="查看" top="2vh" width="50%" :is-button="false">
    <div class="dialog-body" style="margin: 0 auto;">
      <!-- <el-divider content-position="left" style="font-size: 20px;">查看</el-divider> -->
      <el-descriptions :column="3" border>
        <el-descriptions-item label-class-name="my-label" label-align="center" v-for="item in descriptionList"
          :key="item.label" :label="item.label">
          <!-- {{ item.value }} - {{ form['carCategory'] }} -->
          <div v-if="item.options && item.options.length">
            <div v-if="item.value == 'carType'">
              <div>{{(item.options.find((opt) => opt.value == form["carCategory"]) as
                any).options.find((opt2: any) => opt2.value == form[item.value])?.label}}</div>
            </div>
            <!-- 客车类型等级-->
            <div v-else-if="item.value == 'typeLevel'">
              <div v-if="form['carCategory'] == 1">
                <!-- {{ item.options }} -->
                <!-- {{(item.options.find((opt: any) => opt.value == 'typeLevel') as any).options.find((opt2: any) => opt2.value
                  == form[item.value])?.label }} -->
                <!-- {{ typeLevelList[0].options.find(opt => opt.value == form[item.value])?.label }} -->
                {{item.options.find(opt => opt.value == form[item.value])?.label}}
              </div>
            </div>
            <div v-else>{{item.options.find((opt) => opt.value == form[item.value])?.label}}</div>
          </div>
          <!-- 车籍地 -->
          <div v-else-if="item.value == 'carRegistration'">
            {{areaList.find(area => area.areaCode == form[item.value])?.area}}
          </div>
          <!-- 监测站转换 -->
          <div v-else-if="item.value == 'testStation'">

            {{(checkStationList.find((item: any) => item.id == form['testStation']) as any).shortName}}
          </div>
          <div v-else>{{ form[item.value] }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </form-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import FormDialog from "@/components/FormDialog.vue";
import { getAreaListApi } from "@/api/user";
import { getCheckStationListApi } from "@/api/second";
import { carCategoryList, vehicleLevelList, typeLevelList } from "@/enum/index";

const form = ref();

const descriptionList = [
{
    label: "所属企业",
    value: "belongCompany"
  },
  {
    label: "车牌号码",
    value: "licensePlate"
  },{
    label: "检测单号",
    value: "inspectionId"
  },
  {
    label: "车辆技术等级",
    value: "vehicleLevel",
    options: vehicleLevelList,
  },
  {
    label: "客车类型等级",
    value: "typeLevel",
    //获取数组的第一个对象options的值
    options: typeLevelList[0].options,
    // options: typeLevelList,
  },
  {
    label: "车牌颜色",
    value: "carColor",
    options: [
      {
        label: "黄",
        value: 1
      },
      {
        label: "蓝",
        value: 2
      },
      {
        label: "绿",
        value: 3
      },
      {
        label: "渐变绿",
        value: 4
      },
      {
        label: "黄绿双拼色",
        value: 5
      }
    ]
  },
  {
    label: "车辆类别",
    value: "carCategory",
    options: carCategoryList
  },
  {
    label: "车辆类型",
    value: "carType",
    options: carCategoryList
  },
  {
    label: "车籍地",
    value: "carRegistration"
  },
  
  {
    label: "经办人电话",
    value: "operatorPhone"
  },
  {
    label: "检测站",
    value: "testStation"
  },
  
  {
    label: "检测日期",
    value: "checkTime"
  },
  {
    label: "本次年审日期",
    value: "nowValidityTime"
  },
  {
    label: "年审有效期",
    value: "validityTime"
  },
  {
    label: "等级评定日期",
    value: "nowEvaluationTime"
  },
  {
    label: "等级有效期",
    value: "levelValid",
    options: [
      {
        label: "6个月",
        value: "1"
      },
      {
        label: "12个月",
        value: "2"
      }
    ]
  },
  {
    label: "下次等级评定日期",
    value: "nextEvaluationTime"
  },
  {
    label: "是否农客",
    value: "isFarmer",
    options: [
      {
        label: "非农客",
        value: "1"
      },
      {
        label: "农客",
        value: "0"
      }
    ]
  },
  {
    label: "客车评定日期",
    value: "evaluationTime"
  },
  {
    label: "是否安装视频监控",
    value: "isInstallVideo",
    options: [
      {
        label: "是",
        value: 0
      },
      {
        label: "否",
        value: 1
      }
    ]
  },
  {
    label: "GPS最后上线时间",
    value: "gpsLoginTime"
  },
  {
    label: "最近一年是否上线",
    value: "isOnlineYear",
    options: [
      {
        label: "是",
        value: 0
      },
      {
        label: "否",
        value: 1
      }
    ]
  },
  {
    label: "投保险种",
    value: "coverageType",
    options: [
      {
        label: "营业性",
        value: "1"
      },
      {
        label: "非营业性",
        value: "2"
      }
    ]
  },
  {
    label: "是否有效保单",
    value: "isValid",
    options: [
      {
        label: "是",
        value: 0
      },
      {
        label: "否",
        value: 1
      }
    ]
  },
  {
    label: "起保日期",
    value: "startCoverageTime"
  },
  {
    label: "终保日期",
    value: "endCoverageTime"
  },{
    label: "受理编号",
    value: "acceptanceId"
  },
  {
    label: "受理时间",
    value: "createTime"
  },
];

// const descriptionList = ref([]);

const formDrawerRef = ref();
const handleOpen = (row: any) => {
  console.log(row);
  form.value = row;
  // descriptionList.value = row;
  // row 是一个对象
  formDrawerRef.value.open();
};
defineExpose({
  handleOpen
});


type areaListType = { areaCode: string; area: string }[];
const areaList = ref<areaListType>([]);
/** 获取区县列表 */
const getAreaList = () => {
  getAreaListApi().then((response: any) => {
    areaList.value = response
  });
};
/** 获取检测站列表 */
const checkStationList = ref([]);
const getCheckStationList = () => {
  getCheckStationListApi({}).then((response: any) => {
    checkStationList.value = response;
    console.log(response);
  });
};

getCheckStationList()
getAreaList();
</script>
<style scoped lang="scss">
:deep(.my-label) {
  width: 120px !important;
  font-weight: 700 !important;
}
</style>
